<template>
  <view class="activity-content">
    <image class="activity-bg" v-if="showBar" :src="commonStore.baseImageUrl + 'test-yujia/member/invite-bg.jpg'" />

    <view class="activity-box">
      <view class="activity-item" v-if="checkIn" @click="linkToCheckIn">
        <image class="activity-item-icon" :src="commonStore.baseImageUrl + 'test-yujia/shop/xing.png'" />
        <view class="activity-item-content">
          <text class="activity-item-title">成长积分任务</text>
          <text class="activity-item-desc">今天签到+1</text>
        </view>
        <image class="activity-item-bg" :src="commonStore.baseImageUrl + 'test-yujia/member/icon_yin.png'" />
      </view>
      <view class="activity-item" v-if="showExchange" @click="linkToExchange">
        <image class="activity-item-icon" :src="commonStore.baseImageUrl + 'test-yujia/shop/xing.png'" />
        <view class="activity-item-content">
          <text class="activity-item-title">积分商城</text>
          <text class="activity-item-desc">用积分兑换商品</text>
        </view>
        <image class="activity-item-bg" :src="commonStore.baseImageUrl + 'test-yujia/member/icon_yin.png'" />
      </view>
      <view class="activity-item activity-item-1" @click="linkToInvite">
        <image class="activity-item-icon" :src="commonStore.baseImageUrl + 'test-yujia/shop/aixing.png'" />
        <view class="activity-item-content">
          <text class="activity-item-title">分享PULS开通</text>
          <text class="activity-item-desc">获取大量会员值</text>
        </view>

        <image class="activity-item-bg" :src="commonStore.baseImageUrl + 'test-yujia/member/icon_yin.png'" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useCommonStore } from "@/store";

const commonStore = useCommonStore();

defineProps({
  showBar: {
    type: Boolean,
    default: true,
  },
  showExchange: {
    type: Boolean,
    default: false,
  },
  checkIn: {
    type: Boolean,
    default: false,
  },
});

const linkToInvite = () => {
  uni.navigateTo({
    url: "/pages/subpackages/memberCenter/open-plus",
  });
};

const linkToExchange = () => {
  uni.navigateTo({
    url: "/pages/subpackages/memberCenter/jifen-exchange",
  });
};

const linkToCheckIn = () => {
  uni.navigateTo({
    url: "/pages/subpackages/mineCenter/checke-in-center",
  });
};
</script>

<style scoped lang="scss">
.activity-content {
  width: 100%;

  .activity-bg {
    width: 100%;
    height: 38rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .activity-box {
    display: flex;
    padding: 30rpx;
    gap: 30rpx;
    box-sizing: border-box;

    .activity-item {
      background-color: #aad04a;
      border-radius: 20rpx;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      padding: 30rpx;
      display: flex;
      flex: 1;

      &-1 {
        background-color: #8fb433;
      }

      .activity-item-icon {
        width: 66rpx;
        height: 66rpx;
        flex-shrink: 0;
        margin-right: 6rpx;
      }

      .activity-item-content {
        font-size: 24rpx;
        color: #fff;
        display: flex;
        flex-direction: column;

        .activity-item-desc {
          font-size: 18rpx;
        }
      }

      .activity-item-bg {
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        bottom: -34rpx;
        right: -20rpx;
      }
    }
  }
}
</style>
